<template>
  <u-toast ref="uToastRef"></u-toast>
  <div class="view">
    <div class="action">
      <div class="left">
        <u-button class="btn" type="primary" @click="navigate({url:'/pages/activity/activityList/apply/apply',query:{id:info.id}})">
          <image src="@/static/icon/apply.png" />申请列表
        </u-button>
        <u-button class="btn" type="primary" @click="navigate({url:'/pages/activity/activityList/personnel/personnel',query:{id:info.id}})">
          <image src="@/static/icon/person.png" />人员管理
        </u-button>
      </div>
      <div>
        <u-button class="remove" @click="remove">
          <image src="@/static/icon/remove.png" />删除
        </u-button>
      </div>
    </div>
    <div class="card">
      <div class="label1">{{info.title}}</div>
      <div class="pictures">
        <div class="p_item">
          <image class="img"  :src="fileUrl(info.img)" mode="widthFix" />
          <div class="desc">(活动封面)</div>
        </div>
        <div class="p_item">
          <image class="img" :src="fileUrl(info.sign_qr_url)" @click="showQrCode(fileUrl(info.sign_qr_url))" mode="widthFix" />
          <div class="desc">(签到二维码)</div>
        </div>
        <div class="p_item">
          <image class="img" :src="fileUrl(info.qr_url)" @click="showQrCode(fileUrl(info.qr_url))" mode="widthFix" />
          <div class="desc">(活动二维码)</div>
        </div>
      </div>
    </div>
    <div class="card2">
      <div class="label2">更多信息</div>
      <u-divider></u-divider>
      <div class="content">
        <div class="item" v-for="item in list">
          <div class="l_label">{{item.label}}</div>
          <div class="l_value" v-if="item.key=='tag_name'">{{info[item.key]?.join(',')}}</div>
          <div class="l_value" v-else-if="['is_apply','is_play'].includes(item.key)">{{info[item.key]==1?'是':'否'}}</div>
          <div class="l_value" v-else>{{info[item.key]}}</div>
        </div>
      </div>
    </div>
    <div class="action1" v-if="info.is_play==2">
      <u-button class="btn" type="primary" @click="publish">
        <image src="@/static/icon/publish.png" />发布
      </u-button>
      <!-- <u-button class="btn" type="primary" @click="edit">
        <image src="@/static/icon/edit.png" />修改
      </u-button> -->
    </div>
    <div class="action2" v-else>
      <u-button class="back" @click="cancel">
        <image src="@/static/icon/back.png" />撤回
      </u-button>
      <div class="publish">已发布</div>
    </div>
  </div>
  <div class="big_qr_code" v-if="bigCodeSrc" >
    <div class="close">
      <u-icon name="close-circle" color="#fff" size="28" @click="bigCodeSrc=''"></u-icon>
    </div>
    <image :src="bigCodeSrc" @click.stop class="img"></image>
  </div>
  <Question ref="lModal" @confirm="_remove" />
</template>


<script setup>
import { navigate } from '@/util/navigate'
import { request, catchException } from '@/util/request'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { fileUrl } from '@/util/util'
import Question from '@/components/Modals/question.vue'
const isPublish = ref(true)
const uToastRef = ref()
const bigCodeSrc = ref('')

function showQrCode(imgUrl){
  bigCodeSrc.value = imgUrl
}

onLoad((opt) => {
  request({
    url: 'adminMobile/activity/detail', data: {
      id: opt.id
    }
  }).then(res => {
    info.value = res.content
  }).catch(e => catchException(e))
})

const info = ref({
  name: '2023艺术节：图书创意市集',
  type: '非遗手工',
  tag: '#手工'
})
const list = [{
  label: '活动名称',
  key: 'title'
}, {
  label: '活动类型',
  key: 'type_name'
}, {
  label: '活动标签',
  key: 'tag_name'
}, {
  label: '是否需要报名',
  key: 'is_apply'
}, {
  label: '活动名额',
  key: 'number'
}, {
  label: '参与人数',
  key: 'apply_number'
}, {
  label: '活动开始时间',
  key: 'start_time'
}, {
  label: '活动结束时间',
  key: 'end_time'
}, {
  label: '是否发布',
  key: 'is_play'
}, {
  label: '活动地址',
  key: 'address'
}, {
  label: '联系人',
  key: 'contacts'
}, {
  label: '联系电话',
  key: 'tel'
}, {
  label: '创建时间',
  key: 'create_time'
}]
// 发布
function publish() {
  request({
    url: 'adminMobile/activity/release',
    method: 'post',
    data: {
      id: info.value.id
    }
  }).then(res => {
    uToastRef.value.show({ message: res.msg })
    info.value.is_play = 1
  }).catch(e => catchException(e))
}
// 撤回
function cancel() {
  request({
    method: 'post',
    url: 'adminMobile/activity/cancel',
    data: {
      id: info.value.id
    }
  }).then(res => {
    uToastRef.value.show({ message: res.msg })
    info.value.is_play = 2
  }).catch(e => catchException(e))
}
// 修改
function edit() {
  navigate({ url: '/pages/activity/activityList/create/create', query: { id: info.value.id } })
}
const lModal = ref()
function remove() {
  lModal.value.open({ tip: '确定要删除该活动吗？', data: info.value.id })
}
// 删除
function _remove(id) {
  navigate({ navMethod: 'navigateBack', query: { refresh: true } })
  return
  request({
    url: 'adminMobile/activity/del',
    method: 'POST',
    data: {
      id: id
    }
  }).then(res => {
    navigate({ navMethod: 'navigateBack', query: { refresh: true } })
    uToastRef.value.show(res.msg)
  }).catch(e => catchException(e))
}

</script>

<style lang="scss" scoped>
.view {
  padding: 30rpx 30rpx 180rpx 30rpx;
}
page {
  background: #f3f3f3;
}
.action {
  display: flex;
  justify-content: space-between;
  .left {
    display: flex;
    gap: 20rpx;
    .btn {
      width: 200rpx;
      height: 64rpx;
      background: #468eff;
      border-radius: 16rpx;
      image {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
  .remove {
    width: 145rpx;
    height: 64rpx;
    background: #df5146;
    border-radius: 16rpx;
    color: #fff;
    image {
      width: 40rpx;
      height: 40rpx;
    }
  }
}
.card {
  margin-top: 24rpx;
  padding: 30rpx;
  background: #ffffff;
  border-radius: 16rpx;
}
.label1 {
  font-size: 32rpx;
  font-family: PingFang SC, PingFang SC-Bold;
  font-weight: 700;
  color: #333333;
}
.pictures {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  .p_item {
    display: flex;
    flex-direction: column;
    align-items: center;
    .img {
      width: 100%;
      max-height: 200rpx;
    }
    .desc {
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: center;
      color: #666666;
    }
    .download {
      font-size: 24rpx;
      font-weight: 400;
      text-decoration: underline;
      text-align: center;
      color: #468eff;
    }
  }
}
.card2 {
  margin-top: 24rpx;
  padding: 30rpx;
  background: #ffffff;
  border-radius: 16rpx;
  .u-divider {
    margin-top: 12rpx;
    margin-bottom: 0;
  }
  .label2 {
    margin-left: 20rpx;
    font-size: 32rpx;
    font-family: PingFang SC, PingFang SC-Bold;
    font-weight: 700;
    text-align: left;
    color: #333333;
    position: relative;
  }
  .label2::before {
    content: "";
    position: absolute;
    left: -20rpx;
    width: 6rpx;
    height: 36rpx;
    background: #468eff;
    top: 50%;
    transform: translateY(-50%);
  }
  .content {
    display: flex;
    flex-direction: column;
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 64rpx;
      .l_label {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #333333;
      }
      .l_value {
        font-size: 28rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        color: #666666;
      }
    }
  }
}
.action1 {
  box-shadow: 0 -2rpx 0rpx #f3f3f3;
  padding: 30rpx 30rpx 30rpx 30rpx;
  box-sizing: border-box;
  position: fixed;
  bottom: 0;
  background: #fff;
  height: 160rpx;
  width: 100vw;
  left: 0;
  display: flex;
  gap: 26rpx;
  .btn {
    width: 332rpx;
    height: 88rpx;
    background: #468eff;
    border-radius: 16rpx;
    image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }
  }
  .publish {
  }
}
.action2 {
  box-shadow: 0 -2rpx 0rpx #f3f3f3;
  padding: 30rpx 80rpx 30rpx 30rpx;
  box-sizing: border-box;

  position: fixed;
  bottom: 0;
  background: #fff;
  height: 160rpx;
  width: 100vw;
  left: 0;
  display: flex;
  justify-content: space-between;
  padding-left: 30rpx;
  gap: 26rpx;
  .back {
    margin-top: 20rpx;
    margin: 0;
    width: 332rpx;
    height: 88rpx;
    background: #fea711;
    border-radius: 16rpx;
    color: #fff;
    image {
      width: 40rpx;
      height: 40rpx;
      margin-right: 10rpx;
    }
  }
  .publish {
    position: relative;
    font-size: 28rpx;
    height: 40rpx;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: left;
    color: #4da66d;
    margin-left: 30rpx;
  }
  .publish::before {
    content: "";
    width: 10rpx;
    height: 10rpx;
    background: #4da66d;
    border-radius: 50%;
    position: absolute;
    left: -20rpx;
    top: 50%;
    transform: translateY(-50%);
  }
}
.big_qr_code {
  position: fixed;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  background: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
  .img {
    width: 80vw;
    height: 80vw;
  }
  .close {
    position: absolute;
    border-radius: 50%;
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    right: 20px;
    top: 20px;
  }
}
</style>